{% extends "admin_base.html" %}
{% block pageContent %}
    <form enctype="multipart/form-data" method="POST">
    <table>
    <tr>
        <th>
            <label for="id_name">Name:</label>
        </th>
        <td>
            {{ form.name.errors }}
            {{ form.name }}
        </td>
    </tr>
    <tr>
        <th>
            <label for="id_type">Type:</label>
        </th>
        <td>
            {{ form.type.errors }}
            {{ form.type }}
        </td>
    </tr>
    <tr id="nodeRow" style="display: none;">
        <th>
            <label for="id_node">Node:</label>
        </th>
        <td>
            {{ form.node.errors }}
            {{ form.node }}
        </td>
    </tr>
    <tr id="nodeTypeRow" style="display: none;">
        <th>
            <label for="id_node_type">Node Type:</label>
        </th>
        <td>
            {{ form.node_type.errors }}
            {{ form.node_type }}
        </td>
    </tr>
    <tr id="counterRow" style="display: none;">
        <th>
            <label for="id_counter">Counter:</label>
        </th>
        <td>
            {{ form.counter.errors }}
            {{ form.counter }}
        </td>
    </tr>
    <tr id="comparisonRow" style="display: none;">
        <th>
            <label for="id_comparison"></label>
        </th>
        <td>
            {{ form.comparison.errors }}
            {{ form.comparison }}
        </td>
    </tr>
    <tr id="comparisonValueRow" style="display: none;">
        <th>
            <label for="id_comparison_value"></label>
        </th>
        <td>
            {{ form.comparison_value.errors }}
            {{ form.comparison_value }}
        </td>
    </tr>
    <tr>
        <th>
            <label for="id_message">Message:</label>
        </th>
        <td>
            {{ form.message.errors }}
            {{ form.message }}
        </td>
    </tr>
    <tr>
        <th>&nbsp;</th>
        <td>
            {% ifequal action "update" %}
            <input id="submitButton" type="submit" value="Update" />
            {% else %}
            <input id="submitButton" type="submit" value="Create" />
            {% endifequal %}
            <input id="cancelButton" type="button" value="Cancel" onclick="history.back();" />
        </td>
    </tr>
    </table>
    </form>
    <script type="text/javascript" >
        var variableElements = $('#comparisonRow, #comparisonValueRow, #nodeRow, #nodeTypeRow, #counterRow');
    
        $(document).ready(function() {
            $('#id_type').bind('change', function() {
                
                // Clear all controls
                $('#comparisonRow, #comparisonValueRow, #nodeRow, #nodeTypeRow, #counterRow').hide();
                
                // Show controls based on feedback type
                switch($(this).val()) {
                    case 'time':
                        $('#comparisonRow').show();
                        $('#comparisonValueRow').show();
                        break;
                    
                    case 'node':
                        $('#nodeRow').show();
                        break;
                    
                    case 'node_type':
                        $('#nodeTypeRow').show();
                        $('#comparisonRow').show();
                        $('#comparisonValueRow').show();
                        break;
                    
                    case 'counter':
                        $('#counterRow').show();
                        $('#comparisonRow').show();
                        $('#comparisonValueRow').show();
                        break;
                }
            });
            
            // Trigger the function so that the proper controls are displayed
            // when updating an existing feedback object.
            $('#id_type').triggerHandler('change');
        });
    </script>
{% endblock %}